<template>
	<view class="app">
		<view class="current-locat font-size-14px flex-y-center">
			<view class="orientation flex-y-center flex-grow-1">
				<!-- <view class="icon iconfont icon-address"></view> -->
				<com-icons class="input-uni-icon" type="location-filled" size="18" color="#BC0100" />
				<view class="text">广州市白云区金岭南街19号</view>
			</view>
			<view class="refresh flex-y-center">
				<com-icons class="input-uni-icon" type="refreshempty" size="26" color="#BC0100" />
				<view class="text">重新定位</view>
			</view>
		</view>
		<view class="stores">
			<view class="stores-title font-size-14px flex-y-center">
				<view class="text flex-grow-1">附近门店:</view>
				<navigator url="./other-region">
					<view class="flex-y-center">
						<view>选择其他区域的门店</view>
						<view class="icon flex-y-center"><com-icons class="input-uni-icon" type="arrowright" size="18" color="#BC0100" /></view>
					</view>
				</navigator>
			</view>
			<view class="items">
				<view class="store-item" v-for="(item, i) in 4" :key="i" @click="checkedStore(i)">
					<view class="store-info flex">
						<image :src="url" class="store-img" mode="aspectFill"></image>
						<view class="store-detail">
							<view class="flex-y-center">
								<view class="store-name flex-grow-1">员村友客来便利店</view>
								<com-icons class="input-uni-icon" type="phone-filled" size="15" color="#BC0100" />
							</view>
							<view class="store-number">门店编号：440106100227</view>
							<view class="store-distance flex-y-center">
								<view class="flex-grow-1">
									<text class="store-num">77</text>
									<text>人购买过</text>
								</view>
								<view class="flex-grow-0">
									<text>距您</text>
									<text class="store-num">323m</text>
								</view>
							</view>
						</view>
					</view>
					<view class="store-addr-detail">地址：广东省广州市天河区广州市天河区员村友客来便利店</view>
				</view>
			</view>
		</view>
		<com-modal :show="true" :custom="true" v-if="!!clickStore" padding="0">
			<view class="modal">
				<view class="flex-col flex-y-center" style="padding:40rpx 54rpx 0">
					<view class="modal-title">温馨提示</view>
					<view class="modal-content">您确定将{{ clickStore.name }}设为新的自提点吗?</view>
				</view>
				<view class="btns flex">
					<view class="btn cancel flex-grow-1" @click="cancel()">取消</view>
					<view class="btn confirm flex-grow-1" @click="confirm()">确定</view>
				</view>
			</view>
		</com-modal>
	</view>
</template>

<script>
const url =
	'';
export default {
	data() {
		return {
			url: url,
			clickStore: null
		};
	},
	onLoad() {
		// console.log(!!this.clickStore);
	},
	methods: {
		confirm() {
			let temp = JSON.parse(JSON.stringify(this.clickStore));
			this.clickStore = null;
		},
		cancel() {
			this.clickStore = null;
		},
		checkedStore(id) {
			this.clickStore = {
				name: '员村友客来便利店'
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.app {
	height: 100%;
	background-color: #ffffff;
}
.current-locat {
	padding: 20rpx 30rpx;
	line-height: 60rpx;
	color: #000000;
}
.stores {
	background-color: #ffffff;
	box-shadow: 0rpx -4rpx 5rpx 0rpx rgba(0, 0, 0, 0.11);
	border-radius: 55rpx;
	padding: 30rpx;

	.stores-title {
		color: #bc0100;
		.text {
			color: #949494;
		}

		.icon {
			margin-left: 22rpx;
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
		}
	}

	.store-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;

		&:last-child {
			border-bottom: 0;
		}

		.store-detail {
			color: #000000;
			font-size: 30rpx;
			line-height: 60rpx;
			flex-grow: 1;
		}
		.store-name {
			font-size: 31rpx;
		}
		.store-number {
			font-size: 27rpx;
			color: #898989;
		}
		.store-img {
			width: 179rpx;
			height: 184rpx;
			border-radius: 10rpx;
			margin-right: 22rpx;
		}
		.store-distance {
			font-size: 27rpx;
		}
		.store-num {
			color: #bc0100;
		}
	}

	.store-addr-detail {
		color: #898989;
		font-size: 27rpx;
		line-height: 39rpx;
	}
}
.modal {
	font-size: 31rpx;
	.modal-title {
		color: #000000;
		line-height: 60rpx;
		margin-bottom: 30rpx;
	}
	.modal-content {
		color: #767676;
		text-align: center;
		line-height: 44rpx;
	}
	.btns {
		margin-top: 55rpx;
		width: 100%;
		border-top: 1rpx solid #f2f2f2;
	}
}
.btn {
	text-align: center;
	line-height: 100rpx;
	border-right: 1rpx solid #f2f2f2;

	&.cancel {
		color: #000000;
	}
	&.confirm {
		color: #566696;
	}

	&:last-child {
		border-right: 0;
	}
}
</style>
